<template>
  <div class="container">
    <img class="login-img" src="../../../static/img/loginBg.png" alt="">
    <div class="content">
      <div class="content-left">
        <p class="l-d-title">基于自主研发的工作流引擎，采用主流大数据分布式架构、并行计算框架 和深度学习框架的底层技术，包含AI能力开发、应用和管理的分布式 人工智能平台，可以满足不同业务场景下的客户需求，实现业务的智能化转型。</p>
        <div class="l-d-item">
            <p v-for="(item, i) in descList" :key="i">
                <i :class="`iconfont ${item.icon}`"></i>
                <span>{{item.desc}}</span>
            </p>
        </div>
      </div>
      <div class="content-right">
        <component :is="componentName" class="main-content"></component>
      </div>
    </div>
  </div>
</template>

<script>
import Login from './Login'

export default {
  name: 'Common',
  components: {Login},
  data () {
    return {
      componentName: 'Login',
      descList: [
        { icon: 'icon-webfuwu', desc: '操作简单，快速上手' },
        { icon: 'icon-webfuwu', desc: '丰富的组件算法和模型模板' },
        { icon: 'icon-webfuwu', desc: '个性化定制服务，优质的技术保障' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    background: -webkit-linear-gradient(left top, #070F1C , #263246);
    background: -o-linear-gradient(bottom right, #070F1C, #263246);
    background: -moz-linear-gradient(bottom right, #070F1C, #263246);
    background: linear-gradient(to bottom right, #070F1C , #263246);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    .login-img {
      height: 280px;
      width: 80%;
    }
    .content {
      .content-left {
        padding-left: 12%;
        width: 50%;
        float: left;
        height: 342px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
        .l-d-title {
            text-indent: 2em;
            font-size: 16px !important;
            color: #CDD0D5;
            line-height: 24px;
            padding-bottom: 20px;
            white-space: normal;
        }
        .l-d-item p {
            display: flex;
            align-items: center;
            span {
                color: #CDD0D5;
            }
            i {
                font-size: 30px;
                color: #CDD0D5;
                margin: 0 20px;
            }
        }
      }
      .content-right {
        width: 50%;
        padding-right: 12%;
        display: flex;
        justify-content: flex-end;
      }
      .main-content {
        width: 368px;
        @media screen and (max-width: 576px) {
          width: 95%;
        }
        @media screen and (max-width: 320px) {
          .captcha-button{
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
